<template>
    <!-- 添加 -->
    <el-button @click="showAdd = true" type="primary" class="mb-5"><el-icon class="mr-1"><Plus /></el-icon>添加用户</el-button>
    <!-- 弹窗 -->
    <el-dialog v-model="showAdd" title="添加客户信息">
        <!-- 表单 -->
        <el-form label-width="100px" :rules="rules" :model="customer" ref="addformRef">

            <el-form-item label="用户名" prop="username">
                <el-input placeholder="请输入用户名" v-model="customer.username" />
            </el-form-item>

            <el-form-item label="账号" prop="account">
                <el-input placeholder="请输入账号" v-model="customer.account" />
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input placeholder="请输入账号" v-model="customer.password" />
            </el-form-item>

            <el-form-item label="性别" prop="gender">
                <el-select v-model="customer.gender" placeholder="请选择性别">
                    <el-option label="女" value="女" />
                    <el-option label="男" value="男" />
                </el-select>
            </el-form-item>

            <el-form-item label="电话" prop="phone">
                <el-input placeholder="请输入手机号码" v-model="customer.phone" />
            </el-form-item>

            <el-form-item label="地址" prop="address">
                <el-input placeholder="请输入地址" v-model="customer.address" />
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="handleAdd">添加</el-button>
            <el-button @click="showAdd = false">取消</el-button>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, defineEmits } from "vue"
// import axios from 'axios'
// import $api from '../../api/index.ts'
import { addCustomer } from '@/api/Customer'
import { ElMessage } from 'element-plus'

const showAdd = ref<Boolean>(false)
const addformRef = ref<any>()

const emit = defineEmits(['finishAdd'])

interface Customer {
    username: String, //用户名
    account: String, //账号
    password: String, //密码
    gender: String, //性别
    address: String, //地址
    phone: String, //手机号
    profile?: String, //头像
}
const customer = ref<Customer>({
    username: '',
    account: '',
    password: '',
    gender: '',
    address: '',
    phone: '',
    profile: '',

})


//添加
const handleAdd = async () => {
    // 获取用户输入的表单数据
    // console.log('添加', abc.value);
    // 将用户输入的数据存到数据库中
    // const res = await $api.post('/abc/add', abc.value)
    const res = await addCustomer(customer.value)
    console.log('res', res.data);

    // 操作之后的信息提示
    const { success, info } = res.data
    if (success) {
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
        // showAdd响应式数据，可以通过.value来改变它的值
        showAdd.value = false

        // 清空表单数据
        addformRef.value.resetFields()
        // 刷新页面
        emit('finishAdd')
    } else {
        ElMessage.error(info)
    }


}

// 表单校验规则
const rules = ref({
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' }
    ],
    account: [
        { required: true, message: '账户不能为空', trigger: 'blur' },

    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
    gender: [
        { required: true, message: '性别不能为空', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '手机号码不能为空', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
    ],
    address: [
        { required: true, message: '地址不能为空', trigger: 'blur' },
    ]
})
</script>

<style scoped>
.input-with-search {
    margin-right: 10px;
}
</style>